<template>
	<view class="content">
		<image class="bgimage" src="https://pic.imgdb.cn/item/6194da4c2ab3f51d9160804a.jpg"></image>
		<image class="logo" src="/static/images/LNlogo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="int">
			<view class="int-title"><text>新增教学楼</text></view>
			<view class="empty"></view>
			<view class="right">
				<slot></slot>
			</view>
			<picker mode="multiSelector" :range="classBulding" @change="slectBuiding"
				@columnchange="slectBuidingcloumnChange" value="">
				<input type="text" disabled v-model="form.academicBuilding" placeholder="" maxlength="12" />
			</picker>
		</view>
		<view class="int">
			<view class="int-title"><text>新增教室名</text></view>
			<view class="empty"></view>
			<view class="right">
				<slot></slot>
			</view>
			<input type="number" :rule="rules" maxlength="3" v-model="form.classroomName" placeholder="" prop="aaa" />
		</view>
		<view class="int">
			<view class="int-title"><text>新增座位数</text></view>
			<view class="empty"></view>
			<view class="right">
				<slot></slot>
			</view>
			<input type="number" maxlength="3" @input="handleInput" :value="val" v-model="form.seats" placeholder="" />

		</view>
		<view class="butt">
			<button class="register" @click="onconfirm()">确认增加</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {

			return {
				classBulding: [
					["教一", "教二", "教三", "教四", "教五"],
					[]
				],
				building: [],
				classBuldingList: [],
				classType: ["A", "B", "C", "D"],
				rules: {
					aaa: [{
						required: true,
						message: '请正确输入',
						trigger: 'blur'
					}],
				},

				filled: false,
				barHeight: uni.getStorageSync("barHeight"),
				disabled: false,
				//用户输入内容
				form: {
					academicBuilding: "教五",
					classroomName: "",
					seats: 0,
				},
				obj: {
					rBuilding: "",
					rNums: 0,
					rRoom: ""
				}
			};
		},

		onLoad() {
			uni.getSystemInfo({
				success: function(res) {
					console.log(res);
					Window.windowWidth = res.windowWidth;
					Window.windowHeight = res.windowHeight;
				}
			})
		},

		methods: {
			slectBuiding: function(e) {

				this.building = this.classBulding[0]
				
				  if (this.classBuldingList[1])
					this.form.academicBuilding = this.building[this.classBuldingList[0]] + this.classBuldingList[1]
				else 
					this.form.academicBuilding = this.building[this.classBuldingList[0]]
			if(typeof (this.form.academicBuilding) === "undefined")   this.form.academicBuilding ="教一"	 
			},
			slectBuidingcloumnChange(e) {

				const value = e.detail.value
				const column = e.detail.column
				console.log("value=>", value)
				console.log("column=>", column)
				switch (column) {
					case 0:{
						switch(value){
							case 0: 
								console.log("value0=>",value)
								this.classBulding[1] =[]
								this.classBuldingList[0] =0
								this.classBuldingList[1] = this.classBulding[1][e.detail.value]	
							break;   
							case 1:
								console.log("value1=>", value)
								this.classBulding[1] = []
								this.classBuldingList[0] = value
								this.classBuldingList[1] = this.classBulding[1][e.detail.value]
								break;
							case 2:
								console.log("value2=>", value)
								this.classBulding[1] = []
								this.classBuldingList[0] = value
								this.classBuldingList[1] = this.classBulding[1][e.detail.value]
								break;
							case 3:
								console.log("value3=>", value)
								this.classBuldingList[0] = value
								this.classBulding[1] = this.classType
								this.classBuldingList[1] = this.classBulding[1][0]
								break;
							case 4:
								console.log("value4=>", value)
								this.classBulding[1] = []
								this.classBuldingList[0] = value
								this.classBuldingList[1] = this.classBulding[1][e.detail.value]
								break;

						}
						break;
					}
					case 1:
						console.log("valueList=>", value)
						this.classBuldingList[1] = this.classType[value]
						break;
				}

			},
			onconfirm() {
				if (this.form.academicBuilding == "") {
					return uni.showToast({
						title: "请输入新增教学楼名称",
						icon: "none"
					})
				}
				if (this.form.classroomName == "") {
					return uni.showToast({
						title: "请输入新增课室编号",
						icon: "none"
					})
				}
				this.$set(this.obj, 'rBuilding', this.form.academicBuilding)
				this.$set(this.obj, 'rRoom', this.form.classroomName)
				this.$set(this.obj, 'rNums', this.form.seats)

				const res = this.$myRequest({
					url: "/addOneClassRooms",
					data: {
						rBuilding: this.obj.rBuilding,
						rRoom: this.obj.rRoom,
						rNums: this.obj.rNums,
					},
					method: 'POST',
				}).then(res => {
					if (res.data.data) {
					   uni.showToast({
							title: "成功添加教室",
							icon: "none"
						})
						setTimeout(()=>{{
							uni.showToast({
								title: "正在返回课室管理页面",
								icon: "none"
							})
						}},1000)
						setTimeout(()=>{
							uni.navigateTo({
								url:"/pages/classroom_management/classroom_management"
							})},3000)
					
					} else {
						return uni.showToast({
							title: "当前教室已存在",
							icon: "none"
						})
					}
				})
			},
			handleInput(e) {
				this.val = e.target.value.replace(/[^\d]/g, '');
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bgimage {
		margin-top: 62%;
		position: absolute;
		z-index: -1;
		background-size: 100%;
		width: 100%;
		height: 100%;
		opacity: 0.5;

	}

	.logo {
		height: 210rpx;
		width: 680rpx;
		margin-top: 80rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 2vw;
		opacity: 0.5;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 40rpx;
		color: #1d1d1e;
	}

	.int {
		margin: 30rpx 25rpx 20rpx;
		border-radius: 25rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		border: 3rpx solid #256d94;
		box-shadow: darkgray 2px 2px 3px;

		input {
			content: '';
			width: 420rpx;
			height: 55rpx;
			flex: 1;
			font-size: 32rpx;

		}

		&-title {

			width: 190rpx;
			line-height: 30rpx;

			text {
				display: flex;
				font-size: 32rpx;
				font-weight: 400;
				color: #366891;

			}
		}
	}

	.logopic {
		// display: flex;
		height: 480rpx;
		background-size: 100%;
		width: 100%;
		position: absolute;
		bottom: 0rpx;
	}

	.empty {
		height: 35rpx;
		width: 2rpx;
		background-color: #bbbbbb;
		margin-left: rpx;
	}

	.right {
		flex: 0;
		padding-right: 25rpx;
	}

	.forget {
		position: relative;
		left: 27vw;

		text {
			color: #808080;
		}
	}

	.butt {
		display: flex;
		margin-top: 30rpx;
		width: 600rpx;

		text {
			display: flex;
			align-items: center;
			text-align: center;
		}

		.register {
			text-align: center;
			width: 410rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #02a7ff;
			color: white;
			font-size: 32rpx;
			font-weight: 400;
			box-shadow: darkgray 3px 3px 5px;
		}
	}

	.copyright {
		position: absolute;
		bottom: 10rpx;
		font-size: 28rpx;
		color: #9f9f9f;
	}
</style>
